<template>
    <div>
        <el-button icon="el-icon-plus" @click="openDevicePicker" class="picker-btn">添加关联资产</el-button>
        <el-dialog title="选择资产" :visible.sync="dialogVisible" class="device-picker-content" :before-close="handleClose" append-to-body>
            <div class="dig-query clearfix">
                <el-form :inline="true" :model="assetsSort" class="demo-form-inline f-left">
                    <div class="el-form-item el-form-item--small"><label class="el-form-item__label">请选择</label></div>
                    <el-form-item>
                        <el-cascader :options="options" v-model="selectedOptions" :props="defaultProps" @change="handleChange">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model.trim="assetsSort.otherInfo" placeholder="资产编号/资产/ip/mac地址/责任人"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="queryData(assetsSort)">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-row :gutter="10" class="device-list">
                <el-col :span="8" v-for="(item,index) in list" :key="index"><a class="item" @click="chooseThis(item)"><span>{{item.name}}</span></a></el-col>
            </el-row>
            <div class="page-wrap" v-if="pagesTotal>50">
                <el-pagination background  @current-change="currentChange" layout="total, prev, pager, next" :total="pagesTotal" :page-size="pageSize">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import request from "@/utils/request";
import config from "@/config/index";
export default {
  name: "AssetsPicker",
  data() {
    return {
      dialogVisible: false,
      pageSize: 50,
      pagesTotal: 0,
      currentPage: 1,

      LevConfig: "",
      StaConfig: "",

      assetsSort: {
        classify: "",
        state: "",
        secretLevel: "",
        otherInfo: ""
      },
      list: "",
      defaultProps: { value: "id" }
    };
  },
  methods: {
    chooseThis(data) {
      function getListId() {
        let p = new Promise((resolve, reject) => {
          resolve(data.id);
        });
        return p;
      }
      getListId().then(id => {
        request({
          url: this.$api.getAssetsDetail + `?id=${id}`,
          method: "get"
        }).then(_ => {
          console.log(_);

          // function fomatProperty() {
          //   let tempData = [];
          //   for (let i in _.data.devicePropertyValue) {
          //     tempData.push(_.data.devicePropertyValue[i].formValue);
          //   }
          //   return tempData.join(",");
          // }

          // let emitData = {
          //   deviceCode: _.data.code,
          //   deviceId: _.data.id,
          //   deviceName: _.data.name,
          //   number: 1,
          //   propertyValue: fomatProperty()
          // };
          this.$emit("getAssetsList", _.data);
          this.dialogVisible = false;
        });
      });
    },
    getAllSort() {
      request({
        url: this.$api.queryAllSort,
        method: "get"
      }).then(res => {
        this.options = res.data;
      });
    },
    queryData(parms) {
      this.getAssetsList(parms.otherInfo, "", "", 50, 1, "", parms.classify);
    },
    openDevicePicker() {
      //插入动态组件
      this.dialogVisible = true;
    },
    handleChange(value) {
      //   console.log(value[value.length - 1]); 数组最后一个
      this.parms.classify = value[value.length - 1];
    },
    handleClose() {
      this.dialogVisible = false;
    },
    getAssetsList(
      condition = "",
      assetStatus = "",
      departmentId = "",
      limit = 10,
      offset = 1,
      secretLevel = "",
      typeId = ""
    ) {
      this.isLoading = true;
      request({
        method: "get",
        url:
          this.$api.queryAssetsForPage +
          `?condition=${condition}&departmentId=${departmentId}&assetStatus=${assetStatus}&limit=${limit}&offset=${offset}&secretLevel=${secretLevel}&typeId=${typeId}`
      }).then(res => {
        console.log(res);
        this.list = res.data.list;
        this.pagesTotal = res.data.total;
        this.pageSize = res.data.pageSize;
        this.isLoading = false;
      });
    },
    currentChange(page) {
      this.getAssetsList("", "", "", 50, page, "", "");
    }
  },
  mounted() {
    //初始化数据
    this.LevConfig = config.SecretLevel;
    this.StaConfig = config.DeviceStatus;
    this.getAllSort();
    this.getAssetsList("", "", "", 50, 1, "", "");
  }
};
</script>

<style lang="less" scoped>
.device-picker-content {
  min-width: 800px;
  .device-list {
    height: 300px;
    padding: 10px;
    overflow-y: auto;
    border: 1px solid #ddd;
    a.item {
      padding: 5px 5px;
      display: flex;
      align-items: center;
      height: 30px;
      span {
        white-space: nowrap;
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
      }
    }
    a.item::before {
      content: "";
      width: 3px;
      height: 3px;
      background: #b3b3b3;
      margin-right: 5px;
      border-radius: 4px;
    }
    a.item:hover {
      cursor: pointer;
      background: #f4f4f4;
    }
  }
}
.picker-btn{
    margin: 10px auto 0;
    display: block;
    width: 300px;
}
</style>